<!-- NewTrainCollectionList.html -->
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/html-base.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/public-train.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/train.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/base.css"/>
    <style type="text/css">
    	.ordercontainer {
		    padding-top: 0.4rem;
		}
    </style>
</head>

<body>
	<div class="ordercontainer">
		<div class="listwrapper orderwrapper">
			<ul id="coll_list" class="listbox">
				<!-- <li>
					<a href="javascript:;">
						<div class="u-img"><img src="../../image/default-pic01.png"></div>
						<div class="u-txt">
							<h3>货运代理师资培训班</h3>
							<p>本培训将线上和线下，理论知识和专业技能有机结合在一起，并平结合在一起，并平</p>
							<div><p class="marktxt">2018-12-15</p> <span class="pricetxt">￥12800.00</span></div>
						</div>
					</a>
					<div class="order-statusbox">
						<a class="status-btn" href="signup-list1.html">我要报名</a>
					</div>
				</li>
				<li>
					<a href="javascript:;">
						<div class="u-img"><img src="../../image/default-pic01.png"></div>
						<div class="u-txt">
							<h3>货运代理师资培训班</h3>
							<p>本培训将线上和线下，理论知识和专业技能有机结合在一起，并平结合在一起，并平</p>
							<div><p class="marktxt">2018-12-15</p> <span class="pricetxt">￥12800.00</span></div>
						</div>
					</a>
					<div class="order-statusbox">
						<a class="status-btn" href="signup-kc.html" style="background: #ff4a00;">我要购买</a>
					</div>
				</li> -->
			</ul>
			<div class="noSign" hidden="hidden" id="noData">
				<img src="../../image/default-pic03.png" width="60%">
				<p class="font16 top_15 base_dark_grey" >
					暂无数据
				</p>
			</div>
			<div class="loadFailure" hidden="hidden" id="noNet">
				<img src="../../image/icon_img01.png" width="60%">
				<p class="" >
					数据加载失败
				</p>
				<p>
					请检查您的网络
				</p>
				<button type="button" class="mui-btn mui-btn-outlined" onclick="refreshData()">
					重新加载
				</button>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/newresize.js"></script>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/mui.min.js"></script>
<script type="text/javascript" src="../../script/MD5.js"></script>
<script type="text/javascript" src="../../script/requestTool.js"></script>
<script type="text/javascript" src="../../script/timeStampTool.js"></script>
<script type="text/javascript">
	var page = 1;
	var rows = 10;
	var dropRefreshCount = 0;
	var collArr = new Array();
	apiready = function(){
		setRefreshHeader();
		setPullUpRefresh();
		loadData();
	}
	//下拉刷新
	function setRefreshHeader() {
		api.setRefreshHeaderInfo({
			visible : true,
			bgColor : '#ccc',
			textColor : '#fff',
			textDown : '下拉刷新...',
			textUp : '松开刷新...',
			showTime : true
		}, function(ret, err) {
			refreshData();
		});
	}
	// 上拉加载
	function setPullUpRefresh() {
		api.addEventListener({
			name : 'scrolltobottom'
		}, function(ret, err) {
			if (dropRefreshCount >= rows) {
				dropRefreshCount = 0;
				page++;
				loadData();
			}
		});
	}
	function refreshData(){
		page = 1;
		loadData();
	}
	function loadData(){
		if (page == 1) {
			api.showProgress({
			    style: 'default',
			    animationType: 'fade',
			    title: '数据加载中...',
			    text: '',
			    modal: false
			});
		}
		var params = {
			page : page, 
			rows : rows,
			uid : $api.getStorage('cfnetppuid')
			// uid : '30412'
		};
		cfnetppPOST(url_train_getCollectionList, params, true, function(data, status){
			api.refreshHeaderLoadDone();
			api.hideProgress();
			if (status == "success") {
				if (data.code == 200) {
					if (page == 1) {
						collArr = [];
						$('#coll_list').html('');
					}
					var courses = data.data;
					if (courses != undefined && courses != null && courses.constructor == Array && courses.length > 0) {
						$('#noData').hide();
						$('#noNet').hide();
						dropRefreshCount = courses.length;
						setupCourseHtml(courses);
					}else{
						$('#coll_list').html('');
						$('#noData').show();
						$('#noNet').hide();
					}
				}else{
					if (page == 1) {
						$('#coll_list').html('');
						$('#noData').show();
						$('#noNet').hide();
					}
				}
			}else{
				if (page == 1) {
					$('#coll_list').html('');
					$('#noData').hide();
					$('#noNet').show();
				}
			}
		});
	}
	function setupCourseHtml(arr){
		var oldCount = collArr.length;
		collArr = collArr.concat(arr);
		var newCount = collArr.length;
		for (var i = oldCount; i < newCount; i++) {
			var collData = collArr[i];
			var types = collData.types;
			if (types == 1) {//班级
			 	$('#coll_list').append(classCellHtml(i, collData));
			}else{
				$('#coll_list').append(courseCellHtml(i, collData));
			}
		}
		setupCellClick();
	}
	function setupCellClick(){
		$('.coll-cell').unbind('click');
		$('.coll-cell').click(function(){
			var index = $(this).attr('index');
			var collData = collArr[parseInt(index)];
			collData["id"] = collData.link_id;
			var types = collData.types;
			if (types == 1) {
				api.openWin({useWKWebView:true,
				    name: 'train-det-px',
				    url: 'train-det-px.html',
				    pageParam: collData
				});
			}else{
				api.openWin({useWKWebView:true,
				    name: 'train-det-kc',
				    url: 'train-det-kc.html',
				    pageParam: collData
				});
			}
		});
		$('.status-btn').unbind('click');
		$('.status-btn').click(function(event){
			event.stopPropagation();
			var index = $(this).attr('index');
			var collData = collArr[parseInt(index)];
			collData["id"] = collData.link_id;
			var types = collData.types;
			if (types == 1) {
				loadClassData(collData.link_id, function(status, data){
					if (status) {
						var train_type = data.train_type;
						if (train_type == 4) {
							loadClassCourseData(data.id, function(arr){
								data["courseArr"] = arr;
								api.openWin({useWKWebView:true,
								    name: 'signup-list2',
								    url: 'signup-list2.html',
								    pageParam: data
								});
							});
						}else{
							api.openWin({useWKWebView:true,
							    name: 'signup-list1',
							    url: 'signup-list1.html',
							    pageParam: data
							});
						}
					}
				});
			}else{
				api.openWin({useWKWebView:true,
				    name: 'signup-kc',
				    url: 'signup-kc.html',
				    pageParam: collData
				});
			}
		})
	}
	function loadClassCourseData(id, callback){
		api.showProgress({
		    style: 'default',
		    animationType: 'fade',
		    title: '加载培训班级数据中...',
		    text: '',
		    modal: false
		});
		var params = {
			cid : id,
			uid : $api.getStorage('cfnetppuid')
		};
		cfnetppPOST(url_train_getRelationCourse, params, true, function(data, status){
			api.hideProgress();
			if (status == 'success') {
				if (data.code == 200) {
					var courses = data.data;
					if (courses != undefined && courses != null && courses.constructor == Array && courses.length > 0) {
						if (callback) {
							callback(courses);
						}
					}else{
						if (callback) {
							callback([]);
						}
					}
				}else{
					if (callback) {
						callback([]);
					}
				}
			}else{
				if (callback) {
					callback([]);
				}
			}
		});
	}
	function loadClassData(id, callback){
		api.showProgress({
		    style: 'default',
		    animationType: 'fade',
		    title: '加载报名数据中...',
		    text: '',
		    modal: false
		});
		var params = {
			id : id
		}
		cfnetppPOST(url_train_getClass, params, true, function(data, status){
			api.hideProgress();
			if (status == 'success') {
				if (data.code == 200) {
					var classData = data.data;
					if (callback) {
						callback(true, classData);
					}
				}
			}
		});
	}
	function classCellHtml(index, data){
		return '<li index="'+index+'" class="coll-cell">'+
					'<a href="javascript:;">'+
						'<div class="u-img"><img src="'+data.class_image+'"></div>'+
						'<div class="u-txt">'+
							'<h3>'+data.class_name+'</h3>'+
							'<p>'+data.train_brief+'</p>'+
							'<div><p class="marktxt">'+timeStringWithTimeStamp(data.apply_start_time)+'</p> <span class="pricetxt">￥'+data.train_fee+'</span></div>'+
						'</div>'+
					'</a>'+
					'<div class="order-statusbox">'+
						'<a index="'+index+'" class="status-btn">我要报名</a>'+
					'</div>'+
				'</li>';
	}  
	function courseCellHtml(index, data){
		return '<li index="'+index+'" class="coll-cell">'+
					'<a href="javascript:;">'+
						'<div class="u-img"><img src="'+data.course_image+'"></div>'+
						'<div class="u-txt">'+
							'<h3>'+data.course_name+'</h3>'+
							'<p>'+data.course_describe+'</p>'+
							'<div><p class="marktxt">'+data.teachername+'   '+data.course_period+'课时</p> <span class="pricetxt">￥'+data.course_fee+'</span></div>'+
						'</div>'+
					'</a>'+
					'<div class="order-statusbox">'+
						'<a index="'+index+'" class="status-btn" style="background: #ff4a00;">我要购买</a>'+
					'</div>'+
				'</li>';
	}
</script>
</html>
